.home {
	padding: 0 var(--layout-padding);

	:global(.ant-btn) {
		width: 100%;

		&.ant-btn-link {
			padding: unset;
		}
	}

	.channelLeft {
		.significantBox {
			width: var(--icon-margins);
			text-align: center;

			.icon {
				width: var(--icon-margins);
				height: var(--icon-margins);
				border-radius: 50%;
				background-color: #f07775;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 6px;
			}
		}
	}

	.channelCenter {
		padding-right: var(--padding-with);
	}

	.channelRight {
		padding-left: var(--padding-with);
		border-left: 1px solid #921616;
	}
}

.content {
	display: grid;
	gap: 20px;
	margin-top: 20px;
	grid-column: span 5;
	grid-template-columns: repeat(5, 1fr);

	.carousel {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
		background-color: #f07775;

		.dots {
			justify-content: flex-start;
			padding-left: 5%;

			li {
				width: 16px;
				height: 16px;

				button {
					height: 16px;
					border-radius: 50%;
				}
			}
		}

		:global(.slick-arrow) {
			top: unset;
			bottom: 12px;
			transform: translateY(25%);
			background-color: rgba(255, 255, 255, 0.1);
			width: 28px;
			height: 28px;
			border-radius: 8px;
			z-index: 16;

			&::after {
				color: #fff;
				top: 50%;
				left: 50%;
			}
		}

		:global(.slick-prev) {
			left: unset;
			right: 50px;

			&::after {
				transform: translate(-25%, -50%) rotate(-45deg);
			}
		}

		:global(.slick-next) {
			&::after {
				transform: translate(-75%, -50%) rotate(135deg);
			}
		}

		.contentStyle {
			background-color: #a14f0b;
			color: aqua;
			aspect-ratio: 5 / 3;
			// display: flex;
			// flex-direction: column;
		}
	}

	.video {
		background-color: red;
		aspect-ratio: 5 / 3;
		overflow: hidden;
	}
}
